<template>
    <div>
        <span>id:{{detail.id}}</span> <br>
        <span>title:{{detail.title}}</span> <br>
        <span>content:{{detail.content}}</span> <br>
    </div>
</template>

<script>
    //id所对应的详细信息
    var messageDetailList = [
      {id:0,title:"message00",content:"content for message00"},
      {id:1,title:"message01",content:"content for message01"},
      {id:2,title:"message02",content:"content for message02"},
      {id:3,title:"message03",content:"content for message03"},
    ]

    export default {
        name: "messageDetail",
        props:["id"],
        data(){
          return {
            detail:{}
          }
        },
        methods:{
          showDetail(id){
            //根据id去找对应的数据
            this.detail = messageDetailList.filter((item)=>{
                return item.id === (+id)
            })[0]
          }
        },
        created(){
          //拿到第一次点击的那个id
          this.showDetail(this.id)
        },
        watch:{
          $route:{
            deep:true,
            handler(){
              //拿到第一次点击之后的id
              this.showDetail(this.id)
            }
          }
        }
    }
</script>

<style scoped>

</style>
